<template>
  <div class="mobile-subnav">
    <div class="top">
      <div class="left" :class="{'teamTtile':teamTtile}">
        {{subNav.title ? subNav.title : teamTtile}}
      </div>
      <div v-if="hiddenTop" class="right" @click.stop="open">
        {{currentSubNav}}
        <span class="icon iconfont" :class="{'icon-down':!show,'icon-up1':show}"></span>
      </div>
    </div>
    <transition name="sub-nav-fade"  v-if="show">
      <div class="sub-nav-box">
        <ul>
          <li @click.stop="change(item)" :key="index" v-for="(item,index) in subNav.children">
            <span class="over-flow-text" :class="{'active':item.active}">
              {{item.title}}
            </span>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>

  export default {
    props: [],
    computed: {},
    data() {
      return {
        subNav:{},
        currentSubNav:'',
        show:false,
        hiddenTop:true,
        teamTtile:'',
      }
    },
    components: {},
    mounted() {
      //初始化接受信息
      this.cenetrCntrol.$on('changeNav',(subNav)=>{


        if(!this.isNullOrEmpty(subNav)){
          //更新选中的子菜单
          let obj = subNav.children.find((item)=>{
            return item.active
          });

          this.dlog('changeNav', obj)

          this.currentSubNav = obj.title;

          //更新当前所有菜单
          this.subNav = subNav;
          this.show = false;
          this.hiddenTop = true;
          this.teamTtile = '';
          this.stopScroll(this.show)
        }else{
          if(this.$route.path === '/team/index'){
            this.hiddenTop = false;
            this.subNav = {};
             this.teamTtile = '专家团队';
          }
        }

      });

      document.addEventListener('click',()=>{
        this.show = false;
        this.stopScroll(this.show)
      })

    },
    methods: {
      change(item) {
        this.$router.push({path: item.link});
        this.show = false;
        this.stopScroll(this.show)
      },
      open(){
        this.show = !this.show
        this.stopScroll(this.show)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";
 .mobile-subnav{
   position: fixed;
   .height(80);
   width: 100%;
   background-color:@white-color;
   top: 80/@size;
   left: 0;
   z-index: 101;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
    .top{
      padding: 0 30/@size;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: @font-30;
      font-family: @font-first;
      .right,.teamTtile{
        color: @theme-color;
      }
    }
   .sub-nav-box{
     position: fixed;
     background-color:rgba(0,0,0,0.5);
     width: 100%;
     height: 100%;
     ul{
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       width: 100%;
       background: @sub-nav-bg-color;
       padding-bottom: 20/@size;
       li{
         min-width: 50%;
         display: flex;
         justify-content: center;
         margin-top: 30/@size;
         span{
           width: 300/@size;
           .height(60);
           .line-height(60);
           .border-radus(10);
           background-color: @black-Light-color;
           text-align: center;
           font-size: @font-30;
           color: @black-color;
           padding: 0 10/@size;
           -webkit-line-clamp: 1;
         }
         .active{
           background: @theme-color;
           color: @white-color;
         }
       }
     }
   }
 }

  .sub-nav--fade-enter-active,.sub-nav--fade-leave-active {
    transition: all .3s ease;
  }

  .sub-nav--fade-enter, .sub-nav-fade-leave-to
   {
    transform: translateX(10px);
    opacity: 0;
  }

</style>
